<script setup>
import MianAside from "./components/main-aside.vue"
</script>

<template>
  <div class="common-layout">
    <el-container>
<!--      头部页面-->
      <el-header>Header</el-header>

<!--      侧边栏-->
      <el-container>
        <el-aside width="200px">
          <MianAside>
          </MianAside>
        </el-aside>
        <el-main>
          <el-card style="padding: 0 10px 15px">
            <router-view/>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>


.common-layout {
  height: 100%;

  .el-header {
    background: #c2e59c; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


  }

  .el-container {
    height: 100%;
  }

  .el-card {
    width: 100%;
    height: 100%;
  }
}

</style>
